<template>
  <div
    class="content-box"
    :style="{
      background: `var(${colorVar.HeaderBackGroundColor})`,
      color: `var(${colorVar.HeaderBackTextColor})`,
    }"
  >
    <section class="main">
      <div class="top-box">
        <div class="videoContainer">
          <video
            class="fullscreenVideo"
            id="bgVid"
            playsinline=""
            autoplay=""
            muted=""
            loop=""
            controlsList="nodownload"
            disablePictureInPicture
          >
            <source src="@/assets/WeChat_20230717220356.mp4" type="video/mp4" />
          </video>
          <div class="left-box">
            <div v-if="typeof content !== 'string'">
              <p v-for="(item, index) of content" :key="item">
                【{{ index + 1 }}】:{{ item }}
              </p>
            </div>
            <p v-else>{{ content }}</p>
            <div class="button">
              <el-button v-if="forward_url" @click="toURL(forward_url)"
                >点击跳转
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <template v-if="pic">
        <h2 class="sub_topic">{{ sub_topic }}</h2>
        <div class="pic 1" v-if="typeof pic !== 'string'">
          <el-image
            style="height: 500px; max-width: 500px"
            v-for="item in pic"
            :key="item"
            :src="item"
            fit="cover"
            loading="lazy"
            :zoom-rate="1.2"
            :preview-src-list="pic"
            :initial-index="pic.length"
          />
          <!-- <img  :key="item" :src="item" alt="" /> -->
        </div>
        <div class="pic 2" v-else>
          <el-image
            style="height: 500px"
            :src="pic"
            fit="cover"
            loading="lazy"
            :zoom-rate="1.2"
            :preview-src-list="[pic]"
            :initial-index="1"
          />
        </div>
      </template>
    </section>
    <section class="footer">
      <div class="tags_title">特别赞助</div>
      <div class="tags">
        <img src="@/static/1.png" alt="" />
        <img src="@/static/2.png" alt="" />
        <img src="@/static/3.png" alt="" />
        <img src="@/static/4.png" alt="" />
        <img src="@/static/5.png" alt="" />
        <img src="@/static/6.png" alt="" />
        <img src="@/static/7.png" alt="" />
        <img src="@/static/8.png" alt="" />
        <img src="@/static/9.png" alt="" />
        <img src="@/static/10.png" alt="" />
        <img src="@/static/11.png" alt="" />
        <img src="@/static/12.png" alt="" />
        <img src="@/static/13.png" alt="" />
        <img src="@/static/14.png" alt="" />
        <!-- <img src="@/static/15.png" alt="" /> -->
        <!-- <div v-for="(item, index) of 15" :key="index">
          <img :src="`@/static/${item}.png`" alt="" />
        </div> -->
      </div>
      <!-- <div class="footer-img">
        <img
          src="https://images.openai.com/blob/522d2eaf-74eb-4df8-bb4c-1dbb339e85c1/stangel-2022-1640.jpg?trim=720,0,0,0&width=2000"
          alt=""
        />
      </div> -->
      <div class="mt-spacing-7 pb-spacing-7 bg-inverse" aria-hidden="true">
        <div style="margin-top: -23px">
          <div class="bg-primary" style="margin-top: 0px; height: 23px"></div>
          <div class="bg-primary" style="margin-top: 1px; height: 22px"></div>
          <div class="bg-primary" style="margin-top: 2px; height: 21px"></div>
          <div class="bg-primary" style="margin-top: 3px; height: 20px"></div>
          <div class="bg-primary" style="margin-top: 4px; height: 19px"></div>
          <div class="bg-primary" style="margin-top: 5px; height: 18px"></div>
          <div class="bg-primary" style="margin-top: 6px; height: 17px"></div>
          <div class="bg-primary" style="margin-top: 7px; height: 16px"></div>
          <div class="bg-primary" style="margin-top: 8px; height: 15px"></div>
          <div class="bg-primary" style="margin-top: 9px; height: 14px"></div>
          <div class="bg-primary" style="margin-top: 10px; height: 13px"></div>
          <div class="bg-primary" style="margin-top: 11px; height: 12px"></div>
          <div class="bg-primary" style="margin-top: 12px; height: 11px"></div>
          <div class="bg-primary" style="margin-top: 13px; height: 10px"></div>
          <div class="bg-primary" style="margin-top: 14px; height: 9px"></div>
          <div class="bg-primary" style="margin-top: 15px; height: 8px"></div>
          <div class="bg-primary" style="margin-top: 16px; height: 7px"></div>
          <div class="bg-primary" style="margin-top: 17px; height: 6px"></div>
          <div class="bg-primary" style="margin-top: 18px; height: 5px"></div>
          <div class="bg-primary" style="margin-top: 19px; height: 4px"></div>
          <div class="bg-primary" style="margin-top: 20px; height: 3px"></div>
          <div class="bg-primary" style="margin-top: 21px; height: 2px"></div>
          <div class="bg-primary" style="margin-top: 22px; height: 1px"></div>
          <div class="bg-primary" style="margin-top: 23px; height: 0px"></div>
        </div>
      </div>
    </section>
    <div v-if="computedShow" class="scrollTop" title="回到顶部" @click="toTop">
      <el-icon><ArrowUpBold /></el-icon>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from "vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router";

const { query } = useRoute();
console.log(query);
const content = ref(query.content);
const sub_topic = ref(query.sub_topic);
const forward_url = ref(query.forward_url);
const pic = ref(query.picture_url);
if (query.content.includes("|") && typeof query.content == "string") {
  const arr = query.content.split("|");
  content.value = arr;
}
if (query.picture_url.includes("|") && typeof query.picture_url == "string") {
  const arr = query.picture_url.split("|");
  pic.value = arr;
}
const colorVar = ref({
  HeaderBackGroundColor: "--gray-900",
  HeaderBackTextColor: "--yellow-050",
});
onMounted(() => {
  onBeforeRouteUpdate(async (to) => {
    content.value = await to.query.content;
    pic.value = await to.query.picture_url;
    sub_topic.value = await to.query.sub_topic;
    forward_url.value = await to.query.forward_url;
  });
});

watch(
  () => content.value,
  () => {
    if (content?.value?.includes("|") && typeof content.value == "string") {
      const arr = content.value.split("|");
      content.value = arr;
    }
  }
);
watch(
  () => pic.value,
  () => {
    if (pic?.value?.includes("|") && typeof pic.value == "string") {
      const arr = pic.value.split("|");
      pic.value = arr;
    }
  }
);
const toURL = (url) => {
  window.open(url);
};
const computedShow = computed(() => {
  console.log(document.body.scrollTop);
  let scroll = document.documentElement.scrollTop || document.body.scrollTop;
  console.log(scroll);
  if (document.body.scrollTop !== 0) {
    return false;
  } else {
    return true;
  }
  // const aa = document.body.scrollTop == 0 ? false : true;
  // return aa;
});
const toTop = () => {
  document.body.scrollTop = document.documentElement.scrollTop = 0;
  document.body.style.transition = "all 2s";
};
</script>
<style scoped>
.content-box {
  display: flex;
  flex-direction: column;
}
.main {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  z-index: 9;
}
.left-box {
  width: 60%;
  font-weight: 900;
  padding: 12px;
  bottom: 86px;
  position: absolute;
  left: 27%;
  line-height: 40px;
  color: #fff !important;
  font-size: 25px;
  /* color: rgba(255, 254, 255, 0.5); */
  /* transition: all 2s; */
}
.right-box {
  width: 50%;
  height: 300px;
  padding: 30px;
}
.footer {
  width: 100%;
}
.footer-img {
  padding: 20px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer-element {
  padding-top: 6rem;
  padding-bottom: 7rem;
}
.videoContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  position: relative;
  top: 60px;
  padding: 20px;
}
.videoContainer:before {
  /* content: ""; */
  position: absolute;
  width: 100%;
  height: 64%;
  display: block;
  z-index: -1;
  top: 60px;
  left: 0;
  background: rgba(25, 29, 34, 0.65);
}
.top-box {
  /* width: 100vw;
  height: 100vh; */
  /* z-index: 9999; */
}
.tags_title {
  font-size: 30px;
  margin: 30px auto;
  display: flex;
  justify-content: center;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 50px;
}
.tags > img {
  width: 176px;
  height: 80px;
  margin: 29px;
}
.bg-primary {
  background-color: white !important;
}
.pic {
  display: flex;
  justify-content: space-evenly;
  margin: 50px 10px;
  /* border-top: 1px solid white; */
}
.sub_topic {
  margin: 50px 20px 20px 20px;
  border-top: 1px solid white;
  padding-top: 20px;
}
.scrollTop {
  height: 50px;
  width: 50px;
  background-color: white;
  border-radius: 50%;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 31px;
  right: 23px;
  cursor: pointer;
  z-index: 9999;
}
</style>
